import { defineStore } from 'pinia'
import { appTheme, ThemeKey, ThemeOpt, colorThemes } from '@/style/theme/index'
import { store } from '../index'

interface AppState {
  title: string
  mobile: boolean
  userInfo: string
  
  theme: ThemeKey
  themeOpts: ThemeOpt[]
  isDark: boolean
  greyMode: boolean

  collapse: boolean
  uniqueOpened: boolean
  footer: boolean
  
  settingVisible: boolean
}

export const useAppStore = defineStore('app', {
  state: (): AppState => {
    return {
      // 系统信息
      title: import.meta.env.VITE_APP_TITLE, // 标题
      mobile: false, // 是否是移动端
      userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突

      // 系统配置 - 主题配置
      theme: appTheme.themeKey, // 系统主题
      themeOpts: colorThemes, // 系统主题配置列表
      isDark: appTheme.isDark, // 是否是暗黑模式
      greyMode: appTheme.isGrey, // 是否开始灰色模式，用于特殊悼念日

      // 系统交互
      collapse: false, // 折叠菜单
      uniqueOpened: true, // 是否只保持一个子菜单的展开
      footer: true, // 是否显示页脚

      // 系统组件
      settingVisible: false, // 系统设置弹窗
    }
  },
  getters: {
    getTheme(): ThemeKey {
      return this.theme
    },
    getIsDark(): boolean {
      return this.isDark
    }
  },
  actions: {
    setTitle(title: string) {
      this.title = title
    },
    setMobile(mobile: boolean) {
      this.mobile = mobile
    },
    initTheme() {
      appTheme.init()
      this.theme = appTheme.themeKey
      this.isDark = appTheme.isDark
      this.greyMode = appTheme.isGrey
    },
    setTheme(themeKey: ThemeKey, themeOptValue?: any) {
      appTheme.setTheme(themeKey, themeOptValue)
      this.theme = appTheme.themeKey
    },
    setIsDark(isDark: boolean) {
      appTheme.setIsDark(isDark)
      this.isDark = appTheme.isDark
    },
    setGreyMode(greyMode: boolean) {
      appTheme.setIsGray(greyMode)
      this.greyMode = appTheme.isGrey
    },
    setCollapse(collapse: boolean) {
      this.collapse = collapse
    },
    setUniqueOpened(uniqueOpened: boolean) {
      this.uniqueOpened = uniqueOpened
    },
    setFooter(footer: boolean) {
      this.footer = footer
    },
    setSettingVisible(visible: boolean) {
      this.settingVisible = visible
    },
  }
})

export const useAppStoreWithOut = () => {
  return useAppStore(store)
}
